<template>
  <CommonTable
    :table-data="tableData"
    :table-config="tableConfig"
    :table-loading="loading"
    :is-show-index="true"
  >
    <!-- 简单的slot测试 -->
    <template #name="{ row }">
      <span style="color: red; font-weight: bold">{{
        "测试 " + row.name
      }}</span>
    </template>

    <!-- 操作列测试 -->
    <template #operations="{ row }">
      <el-button size="small" @click="handleEdit(row)">编辑</el-button>
    </template>
  </CommonTable>
</template>

<script setup>
definePageMeta({
  title: "表格测试",
  en_title: "表格测试 List",
  zh_hk_title: "表格测试",
  ssr: true,
  isTokenCheck: true,
});
import { ElTag } from "element-plus";

// 表格配置
const tableConfig = [
  {
    label: "基本信息",
    children: [
      {
        prop: "name",
        label: "姓名",
        width: "120px",
        slotName: "name", // 添加slot名称
      },
      {
        prop: "age",
        label: "年龄",
        width: "80px",
      },
    ],
  },
  {
    label: "财务信息",
    children: [
      {
        prop: "salary",
        label: "工资",
        width: "100px",
        render: (h, row) => {
          return h("span", { style: { color: "#67c23a" } }, `¥${row.salary}`);
        },
      },
    ],
  },
  {
    prop: "department",
    label: "部门",
  },
  {
    prop: "status",
    label: "状态",
    render: (h, row) => {
      const statusConfig = {
        active: { type: "success", text: "在职" },
        inactive: { type: "danger", text: "离职" },
      };
      const config = statusConfig[row.status] || {
        type: "info",
        text: row.status,
      };
      return h(ElTag, { type: config.type }, config.text);
    },
  },
  {
    prop: "operations",
    label: "操作",
    width: "100px",
    slotName: "operations", // 添加操作列
  },
];

// 表格数据
const tableData = [
  {
    name: "张三",
    age: 25,
    salary: 8000,
    department: "技术部",
    status: "active",
  },
  {
    name: "李四",
    age: 30,
    salary: 10000,
    department: "销售部",
    status: "inactive",
  },
];

const loading = ref(false);

const handleEdit = (row) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  console.log("编辑:", row);
};
</script>
